@font20:20px;
@miancolor: #4294FF;
@fontcolor: #9A9A9A;
body{
    background-color: #f8f8f8;
}
header{
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    color: @fontcolor;
    ul{
        border-bottom: 1px solid #DDDDDD;
    }
    li{
        position: relative;
        flex: 1;

    }
    .active{
        font-size: @font20;
        color: @miancolor;
        &::after{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            display: block;
            content: "";
            width: 2em;
            height: 2px;
            background-color: @miancolor;
        }
    }
}
main{
    height: calc(100vh - 44px - 60px -70px);
    .hei{
        height: calc(100vh - 44px - 60px -70px);
        display: none;
    };
    #container{
        height: 100%;
    }
    .running,.cycling{
        .hei;
        .sumDistance{
            padding: 20px;
            height: 100px;
            background-color: #fff;
            h1{
                font-size: 48px;
                font-weight: bold;
                color: @miancolor;
                span{
                    color: #000;
                    font-weight: normal;
                }
            }
        }
        .mode{
            height: 358px;
            background-color: gray;
            ul{
                top: 20px;
                z-index: 20;
                width: 100%;
            }
            li{
                width: 100px;
                height: 30px;
                background-color: #9CBCE2;
                line-height: 30px;
                border-radius: 20px;
            }
        }
        // go按钮
        .go{
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 190px;
            width: 190px;
            border-radius: 50%;
            background-color: rgba(66, 148, 255, .5);
            line-height: 190px;
            color: #fff;
            font-size: 86px;
            font-weight: bolder;
        }
        // 底部控件
        .setting{
            bottom: 10px;
            height: 50px;
            width: 100%;
            align-items: center;
            div{
                height: 50px;
                width: 50px;
                background-color: #fff;
                border-radius: 50%;
                box-shadow:0 -6px 10px #ccc;
                line-height: 50px;
                text-align: center;
                font-size: 30px;
                
            }
            .center{
                width: 120px;
                height: 40px;
                border-radius: 20px;
                background-color: @miancolor;
                color: #fff;
                line-height: 40px;
                font-size: 16px;
                vertical-align: middle;
            }
        }
    };
    .training{
        .hei;
    }
    .on{
        display: block;
    }
    .none{
        display: none;
    }
}